<template>
  <div class="about">
    <!-- <video
      id="my-player"
      class="video-js"
      controls
      muted
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
    > -->
    <!-- <source src="http://220.161.87.62:8800/hls/0/index.m3u8" type="application/x-mpegURL" /> -->
    <!-- <source
        src="http://47.113.146.116:9000/live/home-9001/hls.m3u8"
        type="application/x-mpegURL"
      />
    </video> -->
    <!-- <video id="videoPlayer" class="video-js" width="500px">
      <source :src="url" type="application/x-mpegURL" />
    </video> -->
    <!-- <video
      id="valveVideo"
      class="video-js vjs-default-skin"
      autoplay
      style="width: 100%; height: 100%; object-fit: fill"
    ></video> -->
    <video id="videoElement" class="flv"></video>
  </div>
</template>

<script>
// import "video.js/dist/video-js.css";
// import videojs from "video.js";
import flvjs from "flv.js";
export default {
  data() {
    return {
      // url: "https://vjs.zencdn.net/v/oceans.mp4",
      // url:'http://220.161.87.62:8800/hls/0/index.m3u8', //央视
      // url: "http://47.113.146.116:9000/live/home-9001/hls.m3u8",
      url: " http://47.113.146.116:9000/live/home-9001.live.flv",
      player: null,
    };
  },

  mounted() {
    // this.initVideo();
  },
  methods: {
    initVideo() {
      //初始化视频方法
      var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.url
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  position: relative;
  width: 400px;
  height: 200px;
  .flv {
    width: 100%;
    height: 100%;
  }
}
</style>
